<script lang="ts" setup>
import SpiritIconPro from '@/components/icons/SpiritIconPro.vue'

const options = [
  {
    icon: 'clock',
    title: '周期授权'
  },
  {
    icon: 'code',
    title: '多语言支持'
  },
  {
    icon: 'plane',
    title: '全新UI'
  },
  {
    icon: 'menu',
    title: '多应用授权'
  },
  {
    icon: 'pay',
    title: '在线支付'
  },
  {
    icon: 'record',
    title: '盗版入库'
  },
  {
    icon: 'sale',
    title: '订单系统'
  },
  {
    icon: 'service',
    title: '工单系统'
  },
  {
    icon: 'user',
    title: '自主授权'
  },
  {
    icon: 'cloud',
    title: '数据上云'
  },
  {
    icon: 'data',
    title: '数据可视化'
  },
  {
    icon: 'lock',
    title: '安全稳定'
  }
]
</script>

<template>
  <t-row class="header">
    <div>
      <h1>安全、稳定、高效的云产品授权系统</h1>
      <p>系统经过多次改进和升级，旨在为客户提供更优雅的使用体验</p>
    </div>
  </t-row>

  <t-row class="content">
    <t-col v-for="item in options" :key="item" :lg="2" :md="3" :sm="3" :xl="2" :xs="4" class="col">
      <t-space class="module" direction="vertical">
        <SpiritIconPro :icon="item.icon" />
        <span>{{ item.title }}</span>
      </t-space>
    </t-col>
  </t-row>
</template>

<style lang="sass" scoped>
p
  font-size: 13px
.header
  display: flex
  justify-content: center
  text-align: center
  padding: 20px 0
.content
  display: flex
  justify-content: center
  align-items: center
  text-align: center
  padding: 20px 0
  background-image: url('@/assets/images/author/footer.png')
  background-size: cover
  .module
    margin: 10px 0
    display: flex
    justify-content: center
    align-items: center
</style>
